<template>
	<view>
		<view class="index">
			<scroll-view class="scroll-box" :scroll-y="true" :show-scrollbar="false" :enhanced="true" @scrolltolower="more">
				<view class="box theme-colors" :style="'padding-top:' + safeTop">
					<view class="address">
						<view class="z-flex-c" :style="'height:' + menuH" style="box-sizing: content-box;">
							<image class="address-img z-padding-lr-32" src="../../static/index/address.png"></image>
							<text class="address-text">{{ address.name }}</text>
						</view>
						<view class="z-font-24 job-text">工号：{{ code }}</view>
					</view>
					<view class="last-site z-font-24 z-flex-c z-padding-lr-24 z-margin-t-16">
						<view>上次位置：{{ lastAddress }}</view>
						<view @tap="notice" class="z-flex-0">
							<image class="update-img z-margin-r-8" src="../../static/index/update.png"></image>
							<text class="z-font-22 update-site-text">更新位置</text>
						</view>
					</view>

					<view class="z-flex-c-s-b serve-box z-margin-t-30">
						<view @tap="toServerTime" class="serve-t">服务时间</view>
						<view class="switch z-flex">
							<text class="z-font-26 underway">{{ checked ? '接单中' : '休息中' }}</text>
							<u-switch active-color="#FF9600" v-model="checked" inactive-color="#FFF" @change="onChange" />
						</view>
					</view>
				</view>
				<view class="circle"></view>
				<!-- 公告 -->
				<view class="z-flex-c-s-b z-padding-lr-24 z-radius-8 notice-box" v-if="config.skill_notice">
					<image class="notice-img z-margin-r-24" src="../../static/index/notice.png"></image>
					<u-notice-bar class="z-flex-1" color="#1677FF" bgColor="#fff" icon=" " :text="config.skill_notice" />
				</view>

				<view class="z-flex-c-s-b z-margin-lr-32 waiting-box" @tap="order">
					<view class="waiting-each">
						<view class="z-padding-t-16 z-text-c">待服务：{{ orderCount0 || 0 }}单</view>
						<view class="z-text-c z-padding-t-16 time-text">今天</view>
					</view>
					<view class="waiting-each">
						<view class="z-padding-t-16 z-text-c">待服务：{{ orderCount1 || 0 }}单</view>
						<view class="z-text-c z-padding-t-16 time-text">明天</view>
					</view>
					<view class="waiting-each">
						<view class="z-padding-t-16 z-text-c">待服务：{{ orderCount2 || 0 }}单</view>
						<view class="z-text-c z-padding-t-16 time-text">后天</view>
					</view>
				</view>
				<!-- 项目列表 -->
				<view class="item-list-box">
					<view class="z-padding-32 z-margin-t-32 item-each" v-for="(item,index) in list" @tap="detail(item.id)">
						<view class="z-flex-c-s-b">
							<view class="item-each-text">
								<view>
									<text class="time-yy">预约时间</text>
									<text class="z-margin-l-16 type-text">{{ item.orderDetail.name }}</text>
								</view>
								<!-- 时间 -->
								<view class="time z-margin-tb-16">
									<text class="time-date">{{ item.starttime | date('mm-dd') }}</text>
									<text class="z-margin-l-16 time-hour theme-color">{{ item.starttime | date('hh:MM') }}</text>
								</view>
								<!-- 价格 -->
								<view class="price-unit">
									￥
									<text class="z-font-32 price-number">{{ item.payprice }}</text>
								</view>
							</view>
							<image class="item-each-img" mode="aspectFill" :src="cdn(item.orderDetail.image)"></image>
						</view>
						<view class="z-margin-tb-30 wire"></view>
						<view class="item-underway z-flex-c-s-b">
							<view class="underway-text" v-if="item.status == 2">待出发</view>
							<view class="underway-text" v-if="item.status == 3">已出发</view>
							<view class="underway-text" v-if="item.status == 4">已到达</view>
							<view class="underway-text" v-if="item.status == 5">服务中</view>
						</view>
					</view>
					<!-- <van-empty description="暂无订单" v-if="{{finish && list.length === 0}}" /> -->
					<!-- <u-empty v-if="finish && list.length === 0" mode="" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty> -->
					<u-empty v-if="finish && list.length === 0" text="列表为空" mode="list"></u-empty>
					<login v-if="!token" />
				</view>
			</scroll-view>
		</view>

		<!-- 弹出层 -->
		<u-popup :round="10" mode="center" :show="show" @close="onClose">
			<view class="popup-box">
				<image class="z-margin-t-40 location-img" src="../../static/index/location.png"></image>
				<view class="z-font-30 z-text-c z-margin-t-9">位置更新成功</view>
				<view class="z-margin-t-32 z-text-c location-btn" @tap="onClose">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import login from "@/component/login.vue"
export default {
	components:{
		login
	},
	data() {
		return {
			checked: false,
			    show:false,
			    lastAddress: '',
			    list:[],
			    finish: false,
			    loading: false,
			    page: 1,
			    orderCount: [],
				orderCount0:'',
				orderCount1:'',
				orderCount2:'',
			    token: uni.getStorageSync('token'),
			    code: '',
			    config:  uni.getStorageSync('config'),
				address: uni.getStorageSync('address'),
				// #ifdef MP-WEIXIN
					safeTop:uni.getStorageSync('safeTop'),
					menuH:uni.getStorageSync('menuH')
				// #endif
		}
	},
	 onLoad() {
		 this.http.getLocation().then((res) => {
		 		uni.setStorageSync('address', res);
				this.address = uni.getStorageSync('address')
		 	}).catch((e) => {
		 		uni.setStorageSync('address',e);
				this.address = uni.getStorageSync('address')
		 });
	  },
	  onShow(){
	    this.getInfo()
	    this.reload()
	  },
	methods: {
		//更新位置
		notice(){
			this.changeAddress()
		},
		// 服务时间
		  toServerTime(){
		    this.util.authSkip('/service/serverTime/serverTime')
		  },
		  detail(e){
		    this.util.skip('/pages/orderDetail/orderDetail?id='+e)
		  },
		  // 事件处理函数
		  onChange({ detail }) {
		    if(!uni.getStorageSync('token')) {
		      this.util.skip('/service/login/login')
		      return
		    }
		    this.http.post('skill/updateskillinfo',{type: 'update', is_rest: Number(!detail)}).then(res => {
		      this.checked = detail
		    })
		  },
		  onClose(){
		    this.show = false
		  },
		  changeAddress(){
		    if(!uni.getStorageSync('token')) {
		      this.util.skip('/service/login/login')
		      return
		    }
		    this.http.post('skill/updateskillinfo',{
		      type: 'update',
		       province: this.address.province,
		       city: this.address.city,
		       district: this.address.district,
		       address: this.address.name,
		       lng: this.address.lng,
		       lat: this.address.lat,
		    }).then(res => {
		      this.show = true,
		      this.lastAddress = this.address.city + ' ' +this.address.name
		  })
		  },
		  getInfo(){
		    if(!uni.getStorageSync('token')) return
		    this.http.post('skill/updateskillinfo','',!this.code).then(res => {
		      if(res.data){
		        this.checked = res.data.is_rest === 0,
		        this.lastAddress = res.data.city+ ' ' + res.data.address,
		        this.code = res.data.code
		      }
		    })
		    this.http.post('skill/skillhome','',!this.orderCount).then(res => {
		      this.orderCount = res.data.orderCount
			  this.orderCount0 = this.orderCount[0].count
			  this.orderCount1 = this.orderCount[1].count
			  this.orderCount2 = this.orderCount[2].count
		  })
		  },
		  order(){
		    uni.switchTab({
		      url: '/pages/order/order'
		    })
		  },
		  reload(){
		    this.list = [],
		    this.page = 1,
		    this.finish = false
		    this.getList()
		  },
		  more(){
		    this.page = ++this.page
		    this.getList()
		  },
		  getList(){
		    if(!uni.getStorageSync('token')) return
		    if(this.finish){
		      return
		    }
		    if(this.loading){
		      return
		    }
		    this.loading = true
		    let data = {
		      page: this.page,
		      not_finish: 1
		    }
		    this.http.get('order/skillorderlist', data).then(res => {
		      if(res.data.length === 0){
		        this.finish = true
		      }
		      let arr = this.list.concat(res.data)
		      this.list = arr

		    }).finally(res => {
		      this.loading = false
		    })
		  },
		  knowLocation(){
		    uni.navigateTo({
		      url: '/service/login/login'
		    })
		  },
		  toTraining() {
		    uni.navigateTo({
		      url: '/pages/training/training'
		    })
		  },
		  testbtn(){
		    this.loading = true
		    setTimeout(()=>
		    {
		     this.loading = false
		    }, 2000)
		    console.log(this.loading)
		  },
	}
}
</script>

<style>
page {
	background: #edf1f4;
}
.index {
	height: 100vh;
	/* #ifdef H5 */
	height: calc(100vh - 100rpx);
	/* #endif */
	overflow: hidden;
}
.scroll-box {
	height: 100%;
}

.box {
	height: 350rpx;
}

.address-img {
	width: 40rpx;
	height: 40rpx;
	vertical-align: middle;
}

.address-text {
	font-size: 40rpx;
	color: #fff;
}

.job-text {
	color: rgba(255, 255, 255, 0.5);
	margin: 10rpx 0 0 104rpx;
}

.last-site {
	width: 638rpx;
	margin: auto;
	height: 74rpx;
	background: #ffffff;
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	opacity: 1;
	justify-content: space-between;
}

.update-img {
	width: 24rpx;
	height: 24rpx;
	vertical-align: middle;
}

.update-site-text {
	color: #1677ff;
}

.serve-box {
	width: 686rpx;
	margin: auto;
}

.serve-t {
	width: 140rpx;
	height: 56rpx;
	background: #ff9600;
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	opacity: 1;
	font-size: 26rpx;
	font-weight: 500;
	color: #ffffff;
	line-height: 56rpx;
	text-align: center;
}

.switch {
	color: #fff;
}

.circle {
	width: 750rpx;
	height: 53rpx;
	border-radius: 50rpx 50rpx 0 0;
	background: #edf1f4;
	position: relative;
	top: -50rpx;
}

.notice-box {
	width: 638rpx;
	margin: auto;
	background-color: #fff;
	position: relative;
	top: -56rpx;
}

.notice {
}

.notice-img {
	width: 32rpx;
	height: 32rpx;
	vertical-align: middle;
}

.go-img {
	width: 24rpx;
	height: 24rpx;
}

.list-box {
	width: 686rpx;
	margin: auto;
	background: #ffffff;
}

.train-img-box {
	width: 686rpx;
	height: 100rpx;
	background: linear-gradient(90deg, #e1eeff 0%, rgba(225, 238, 255, 0) 100%);
	border-radius: 20rpx 20rpx 0rpx 0rpx;
	opacity: 1;
	margin: auto;
}

.train-img {
	width: 388rpx;
	height: 100rpx;
}

.train-t {
	color: #6b738b;
}

.item-text {
	width: 363rpx;
	line-height: 48rpx;
}

.item-img {
	width: 200rpx;
	height: 150rpx;
	opacity: 1;
}

.underway {
	position: relative;
	right: 10rpx;
}

.waiting-box {
	/* overflow: hidden;
  overflow-x: auto;
  white-space: nowrap; */
}

.waiting-each {
	width: 213rpx;
	height: 117rpx;
	background: #ffffff;
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	opacity: 1;
	font-size: 24rpx;
	font-weight: 500;
	color: #6b738b;
}

.time-text {
	font-size: 32rpx;
	font-weight: bold;
	color: #1c274c;
}
.item-each {
	width: 622rpx;
	height: 300rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	margin: auto;
}
.time-yy {
	font-size: 22rpx;
	font-weight: 500;
	color: #6b738b;
	background-color: #f5f7fb;
	padding: 6rpx 16rpx;
}
.type-text {
	font-size: 28rpx;
	font-weight: bold;
	color: #1c274c;
}
.time-date {
	font-size: 48rpx;
	font-weight: bold;
	color: #1c274c;
}
.time-hour {
	font-size: 48rpx;
	font-weight: bold;
	display: inline-block;
}
.price-unit {
	font-size: 22rpx;
	font-weight: bold;
	color: #f22e2e;
}
.price-number {
	font-weight: bold;
	color: #f22e2e;
}
.item-each-img {
	width: 180rpx;
	height: 180rpx;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
}
.order-btn {
	width: 622rpx;
	height: 88rpx;
	/* background: #1677FF; */
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	opacity: 1;
	line-height: 88rpx;
	font-size: 22rpx;
	font-weight: 500;
	color: #ffffff;
}
.item-underway {
}
.underway-text {
	font-size: 24rpx;
	font-weight: 500;
	color: #6b738b;
}
.go-text {
	width: 161rpx;
	height: 56rpx;
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	opacity: 1;
	color: #fff;
	line-height: 56rpx;
}
.wire {
	/* width: 622rpx;
height: 1rpx;
background-color: #A4A9B7; */
	width: 622rpx;
	height: 0rpx;
	opacity: 1;
	border: 1rpx solid rgba(164, 169, 183, 0.2);
	margin: auto;
}
.popup-box {
	width: 560rpx;
	height: 412rpx;
	background: #ffffff;
	border-radius: 30rpx 30rpx 30rpx 30rpx;
	opacity: 1;
}
.location-img {
	width: 178rpx;
	height: 178rpx;
	display: block;
	margin: auto;
}
.location-btn {
	width: 496rpx;
	height: 100rpx;
	background: #1677ff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	line-height: 100rpx;
	color: #fff;
	margin: auto;
}
.z-margin-t-9 {
	margin-top: 9rpx;
}
</style>
